<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传房源</title>

    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../layui-v2.6.8/layui/layui.js"></script>
    <script src="../jquery/jquery.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bottom-cav.css">
    <style>
        .log_buttom {
            background-color: #21373d;
        }
        .cen-nav{
            margin-left: 40px;
            float: left;
           
        }
        .top-nav{
            height: 60px;
            width: 100%;
            background-color: #393D49;
        }
        a{text-decoration: none;}
        .pos{
            float: left;
            margin-top: 18px;
            margin-left: 150px;
            
        }
        .log-register{
            float: right;
            margin-right: 300px;
            margin-top: 18px;
            color: rgba(255,255,255,.7);
            display: none;
        }
        .log-register span a{
            color: rgba(255,255,255,.7);
            text-decoration: none;
        }
        .log-register span a:hover{
            color: white;
        }
        .center-content{
          
            
            width: 1250px;
            margin-left: 150px;
            
        }
        .top-seach{
            height: 80px;
            background-color: rgb(245, 245, 246);
        }
        .seach{
            width: 600px;
            margin-left: 150px;
            margin-top: 10px;
        }

        .rent-type{
            margin-left: 150px;
            height: 25px;
            margin-top: 15px;
            
        }
        .rent-type a{
            color: rgb(146, 146, 146);
        }
        .class-area span{
            margin-right: 15px;
        }
        .class-area span a{
            text-decoration: none;
            color: #101d37;
            
        }
        .class-area span a:hover{
            color: blue;
        }
        .class-area{
            width: 100%;
            height: 30px;
            margin-bottom: 5px;
        }   
        .house-sort-type div{
            border-right: 1px solid rgb(237, 237, 237);
            width: 85px;
            float: left;
            height: 53px;
            padding: 15px;
            margin-top: -18px;
        }
        #house-count{
            border: none;
            width: 300px;
            font-weight: bold;
            font-size: 18px;
            margin-left: 50px;
        }
        .house-data{
            margin-left: 150px;
            width: 1250px;
            margin-top: 20px;
        }
        .bottom-house-info-left{
            width: 900px;
     
            float: left;
            background-color: white;
        }
        .bottom-house-info-right{
            width: 250px;
            float: right;   
            background-color: white;
        }
        .bottom-house-info{
            margin-left: -20px;
            border: 1px solid blue;
       
        }
        .house-info{
            float: left;
            margin-bottom: 20px;
            margin-left: 20px;
        }
        .house-info-right{
            
            float: left;
            margin-left: 30px;
           
        }
        .house-info-right div{
            margin-top: 15px;
            color: #849aae;
        }
        .house-info-right div span{
            background-color:rgba(83, 92, 102, 0.1) ;
            padding: 5px;
        }
        .house-info img{
            border-radius: 10px;
        }
        .Pagination{
            float: left;
            margin-top: 20px;
            margin-left: 300px;
        }
        #top-username{
            float: left;
            margin-top: 27px;
            
            font-weight: bold;
            font-size: 16px;
       }
       #top-exit{
            float: left;
            margin-top: 27px;
            margin-left: 10px;
            
            font-weight: bold;
            font-size: 16px;
       }
    </style>
</head>
<body>
    <div class="top-nav">
        <div class="pos">
            <a href="../zxy/search.html">
                <span class="glyphicon glyphicon-map-marker" style="font-weight: bold;color: rgba(255,255,255,.7) ;">&nbsp;吴中区</span>
            </a>
        </div> 
        <div class = "cen-nav"> 
              <ul class="layui-nav" style="font-weight:bolder;">
                
                <li class="layui-nav-item layui-this"><a href="../ych/frontpage.html">首页</a></li>
                <li class="layui-nav-item"><a href="../ych/Classification.html">合租</a></li>
                <li class="layui-nav-item"><a href="../ych/Classification.html">整租</a></li>
                <li class="layui-nav-item"><a href="Classification.html">分类</a></li>
                <li class="layui-nav-item"><a href="../zxy/manager.html">经纪人登录</a></li>
                <li class="layui-nav-item"><a href="javascript:void(0)" onclick="release()">发布房源</a></li>

              </ul>
        </div>
        <div class="log-register">
            <span><a href="">登录</a></span>
            <span>|</span>
            <span><a href="">注册</a></span>
        </div>
        <div id="username-pic" style="float: right;display: none;margin-right: 150px;" >
            <img src="../ych/image/picwish.png" alt="" width="60px" height="60px" style="border-radius: 50px;float: left;">
            <div id = "top-username">
                <a href="../tjj/html/myself.html"  style="color: rgba(255,255,255,.7);" id="husername"><span>余春海</span></a>
            </div>
            <div id="top-exit"><a href="javascript:void(0)" onclick="top_exit()" style="color: rgba(255,255,255,.7);"><span>退出</span></a></div>
        </div>
    </div>
    <div class="header">
        <div class="wrap">
            <div class="nav">
               
            </div>
            
        </div>
    </div>
    <div class="g-main">
        <div class="m-jumbotron">
            <div class="tit">发布房源</div>
            <div class="sub-tit">线下门店众多 · 快速全城推广 · 专业经纪人服务</div>
        </div>
        <div class="m-form" style="margin-left: 28%">
            <div class="form-box">
                
                <div class="box-l m-entry">
                    <form class="layui-form" action="" id="two_release_page">
                    <dl>
                        <dt>租金报价</dt>
                        <dd>
                            <input name="rentPrice" value="" type="text" autocomplete="off" style="width: 250px;">元/月
                        </dd>
                    </dl>
                    <dl>
                        <dt>面积</dt>
                        <dd>
                            <input name="area" value="" type="text" autocomplete="off" style="width: 250px;">平方米
                        </dd>
                    </dl>
                    <dl>
                        <dt>楼层</dt>
                        <dd>
                            <input type="radio" name="floor" value="低楼层" style="margin-top: -10px;margin-right: 10px;"  checked><div style="margin-top: 0px;margin-right: 10px;">低楼层</div>
                            <input type="radio" name="floor" value="中楼层" style="margin-top: -10px;margin-right: 10px;"  ><div style="margin-top: 0px;margin-right: 10px;">中楼层</div>
                            <input type="radio" name="floor" value="高楼层" style="margin-top: -10px;margin-right: 10px;"  ><div style="margin-top: 0px;margin-right: 10px;">高楼层</div>
                        </dd>
                    </dl>
                    <dl>
                        <dt>电梯</dt>
                        <dd>
                            <input type="radio" name="elevator" value="有" style="margin-top: -10px;margin-right: 10px;"  checked><div style="margin-top: 0px;margin-right: 10px;">有电梯</div>
                            <input type="radio" name="elevator" value="无" style="margin-top: -10px;margin-right: 10px;"  ><div style="margin-top: 0px;margin-right: 10px;">无电梯</div>
                        </dd>
                    </dl>
                    <dl>
                        <dt>房屋设备</dt>                
                            <div class="layui-form-item">
                              <div class="layui-input-block" style="margin-left: 120px;">
                                <input type="checkbox" name="l1" title="洗衣机" value="洗衣机">
                                <input type="checkbox" name="l2" title="空调" value="空调">
                                <input type="checkbox" name="l3" title="衣柜" value = "衣柜">
                                <input type="checkbox" name="l4" title="电视" value="电视">
                                <input type="checkbox" name="l5" title="冰箱" value="冰箱">
                                <input type="checkbox" name="l6" title="热水器" value="热水器">
                                <input type="checkbox" name="l7" title="床" value="床">
                                <input type="checkbox" name="l8" title="暖气" value="暖气">
                                <input type="checkbox" name="l9" title="宽带" value="宽带">
                                <input type="checkbox" name="l10" title="天然气" value="天然气">
                              </div>
                            </div>
                    </dl>
                    <dl>
                        <dt>起租日期</dt>
                        <dd>
                            <div class="layui-input-inline">
                                <input type="text" name="startRentData" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                            </div>
                        </dd>
                    </dl>
                   <dl>
                    <dt>上传房源图片</dt>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test2">多图片上传</button> 
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                          预览图：
                          <div class="layui-upload-list" name="demo2" id="demo2"></div>
                          <!-- <div style="width: 95px;">上传进度条
                            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                              <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                          </div> -->
                       </blockquote>
                      </div>
                   </dl>
                   <dl>
                    <dt>房源描述</dt>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="houseDescribe" class="layui-textarea"></textarea>
                      </div>
                    </dl>
                </form>
                </div>
            
                <div class="box-r m-deal" data-component="dealCard"></div>
            </div>
            <div class="m-submit" style="margin-left: -45%;">
                <div class="wrap">
                    <div class="btn-submit" id="btn-submit" onclick="submit_house_infor()" data-view-evtid="17833" data-view-event="ItemExpo" data-click-evtid="17834" data-click-event="WebClick">提交</div>
                </div>
            </div>
        </div>
    </div>
    <div class="log_buttom">
        <div class="log-logo">
        </div>
        <div  class="log-buttom-icon">
            <div class="glyphicon glyphicon-film" style=" color: white;width:50px;height: 50px;font-size: 50px;margin-top: 40px;margin-left: 70px;"></div>
            <div style="margin-left: 65px;color: white;font-size: 15px;font-weight: bold;margin-top: 10px;">极速找房</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-service" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线客户</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-date" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线预约</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-find-fill" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">地图找房</div>
        </div>
        
    </div>
    <div class="buttom_nav">
        <div class="buttom_nav_center">
            <div class="recommend-area-rent">
                <div class="title">
                    推荐区域租房
                </div>
                <div class="recommend-content">
                    <span class="">
                        <a href="">吴中</a>
                        <a href="">吴江</a>
                        <a href="">园区</a>
                        <a href="">太仓</a>
                        <a href="">姑苏区</a>
                        <a href="">常说</a>
                        <a href="">平江</a>
                        <a href="">张家港</a>
                        <a href="">高新区</a>
                        <a href="">沧浪</a>
                        <a href="">相城</a>
                        <a href="">昆山</a>
                        <a href="">金阊</a>
                        </span>
                </div>
            </div>
            <div  style="border-top: 1px solid #8b8d92;margin-top: 80px;height: 15px;"></div>
            <div class="recommend-subway-rent">
                <div class="title">
                    推荐地铁租房
                </div>
                <div class="recommend-content">
                    <span class="">
                        <a href="">1号线</a>
                        <a href="">2号线</a>
                        <a href="">3号线</a>
                        <a href="">4号线支线</a>
                        <a href="">4号线</a>
                        </span>
                </div>
            </div>
            <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
            <div class="Recommend-type-rent">
                <div class="title">
                    推荐类型租房
                </div>
                <div class="recommend-content">
                    <span>
                        <a href="">苏州合租</a>
                        <a href="">苏州整租</a>
                        <a href="">苏州公寓</a>
                        </span>
                </div>
            </div>
            <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
            <div id="about-suleju">
                <div class="title" style="float: left;width: 200px;height: 300px;">
                    <div style="width: 200px;">
                        关于苏乐居
                    </div>
                    <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                        <span>
                            <a href="" >伙伴登录</a>
                            <a href="" style="margin-top: 10px;display: block;">网站地图</a>
                            </span>
                    </div>
                </div>
                <div class="title" style="float: left;width: 200px;">
                    <div style="width: 200px;">
                        苏乐居合作公寓
                    </div>
                    <div class="recommend-content" style="width:140px;margin-top: 0px;font-weight: normal;">
                        <span>
                            <a href="" >青年汇</a>
                            <a href="" style="margin-top: 10px;display: block;">银桥公寓</a>
                            <a href="" style="margin-top: 10px;display: block;">爱家精品公寓</a>
                            </span>
                    </div>
                </div>
                <div class="title" style="float: left;width: 200px;">
                    <div style="width: 200px;">
                        意见回馈
                    </div>
                    <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                        <span>
                            <a href="" >mail:2308844@qq.com</a>
                            </span>
                    </div>
                </div>
                <div class="title" style="float: left;width: 200px;">
                    <div style="width: 200px;">
                        联系苏乐居
                    </div>
                    <div class="recommend-content" style="width:300px;margin-top: 0px;font-weight: normal;">
                        <span>
                            <a href="" >10106006</a>
                            <br>
                            <br>
                            <a href="">周一～周日 8:00～23:00</a>
                            </span>
                    </div>
                </div><br>
                <div id="max-buttom-info">
                    <div id="suleju-web-info">
                        <div style="width:300px;margin-left:-110px">
                            ©2015 上海万间信息技术有限公司
                        </div>  
                        <a href="" style="margin-right: 25px;">
                            隐私协议 
                        </a>
                        <a href="">服务协议</a>
                        <div style="width:300px;margin-left:30px;margin-right: 30px;">上海市浦东新区晨晖路88号 金蝶软件园</div>
                        <a href=""> 沪ICP备15004537号-2    </a>
                    </div>
                    <div id="suleju-web-info">
                        <div style="width: 25px;height: 23px;
                            margin-left: -130px;background-image: url(../ych/image/gongan.png);background-size: 100%;">

                        </div>
                        <a style="width:260px;margin-left:-100px">
                            沪公网安备31011502006937号  
                        </a>  
                        <div style="width:300px;margin-left:0px;">增值电信业务许可证：沪B2-20170251</div>
                        
                    </div>
                    
                </div>
                
            </div>
        </div>
        
    </div>
    <script>
        function submit_house_infor(){
            let token = localStorage.getItem("token");
            let twoHouseInfor = $("#two_release_page").serialize();
            let str = location.href; 
            let arr=str.split("=");
            let value = arr[1];
            value = window.atob(value);
            value = value+"&"+twoHouseInfor;
            layer.msg('房源信息上传成功，等待工作人员联系你。', {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                //do something
                });   
            $.ajax({
                url:"/gewu/upload/house",
                data:value,
                type:"post",
                headers:{"token":token},
                success:function(res){

                }
            })
        }
        //顶部登录注册用户名显示
        $(function(){
            let token = localStorage.getItem("token");
            if(token != null){
                $.ajax({
                    type:"get",
                    url:"/gewu/userLog/isLog",
                    headers:{"token":token},
                    success:function(res){   
                        if(res.code==200){
                            let username_pic = document.getElementById("username-pic");
                            let husername = document.getElementById("husername");
                            husername.innerText = res.content.username;
                            username_pic.style.display="block";
                        }
                        
                    }
                })
            }
            else{
                    let log_register = document.getElementById("log-register");
                    log_register.style.display="block"; 
                }
        })
        layui.use(['form', 'layedit', 'laydate'], function(){
            var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date',
                done: function(value, date, endDate){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
                }
            });


        });
        layui.use(['upload', 'element', 'layer'], function(){
            var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;
            //多图片上传
            upload.render({
                elem: '#test2'
                ,url: '/gewu/upload/pic' //此处配置你自己的上传接口即可
                ,multiple: true,
                field:"files",
                type:"post",
                accept:"images",
                auto:false,
                bindAction:"#btn-submit",
                number:5
                ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" style="width:60px;height:60px" class="layui-upload-img">')
                });
                }
                ,done: function(res){
                //上传完毕
                }
            });
        });
      </script>
</body>
</html>